<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<!DOCTYPE html>
<html>

<head>
    <title>商品列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../../backstage/css/x-admin.css" media="all">

</head>

<body>
<div class="x-nav">
    <span class="layui-breadcrumb">
        <a><cite>首页</cite></a>
        <a><cite>商品管理</cite></a>
        <a><cite>商品列表</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i>
    </a>
</div>
<div class="x-body">
    <form class="layui-form x-center" action="" style="width:80%">
        <div class="layui-form-pane" style="margin-top: 15px;">
            <div class="layui-form-item">

                <label class="layui-form-label">选择类别</label>
                <div  class="layui-input-inline">
                    <select id="type" name="type">
                        <option value="">请选择类别</option>
                        <option value="医疗险">医疗险</option>
                        <option value="意外险">意外险</option>
                        <option value="责任险">责任险</option>
                        <option value="综合险">综合险</option>
                    </select>
                </div>
                <label class="layui-form-label">选择对象</label>
                <div class="layui-input-inline">
                    <select id="subject" name="subject">
                        <option value="">请选择生效对象</option>
                        <option value="猫">猫</option>
                        <option value="狗">狗</option>
                        <option value="兔">兔</option>
                    </select>
                </div>
                <%--<div class="layui-input-inline">--%>
                    <%--<input type="text" id="itemName"name="itemName" placeholder="请输入商品名" autocomplete="off" class="layui-input">--%>
                <%--</div>--%>
                <div class="layui-input-inline" id="search"style="width:80px">
                    <input type="button"  class="layui-btn"  lay-submit="" lay-filter="sreach" value="搜索">
                    </input>
                </div>
            </div>
        </div>
    </form>
    <div id="block">
        <button class="layui-btn" onclick="product_add('添加商品','${path}/admin/itemAdd','800','600')">
            <i class="layui-icon">&#xe608;</i>添加
        </button>
    </div>
    <table class="layui-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>缩略图</th>
                <th>商品名称</th>
                <th>商品类别</th>
                <th>上架日期</th>
                <th>生效对象</th>
                <th>生效时长</th>
                <th>更新日期</th>
                <th>使用方式</th>
                <th>描述</th>
                <th>价格</th>
                <th>积分</th>
                <th>状态</th>
                <th>备注</th>
                <th>
                    操作
                </th>
            </tr>
        </thead>
        <tbody id="x-img">
            <tr>
                <%--<td>1</td>--%>
                <%--<td><img src="../../../backstage/images/logo.png" width="200" height="100" alt=""></td>--%>
                <%--<td>宠物医疗保险</td>--%>
                <%--<td>医疗险</td>--%>
                <%--<td>2019.5.12</td>--%>
                <%--<td>狗</td>--%>
                <%--<td>1年</td>--%>
                <%--<td>2019.5.12</td>--%>
                <%--<td>**</td>--%>
                <%--<td>**</td>--%>
                <%--<td>4000元</td>--%>
                <%--<td>200</td>--%>
                <%--<td>有效</td>--%>
                <%--<td>此处写备注信息</td>--%>
                <%--<td class="td-manage">--%>
                    <%--<a title="编辑" href="javascript:;" onclick="product_edit('编辑','${path}/admin/itemEdit','4','','510')" class="ml-5" style="text-decoration:none">--%>
                        <%--<i class="layui-icon">&#xe642;</i>--%>
                    <%--</a>--%>
                <%--</td>--%>
            </tr>
        </tbody>
    </table>
    <div id="page" style="margin-left: 650px;"></div>
</div>

<script src="../../../backstage/js/jquery.min.js"></script>
<script src="../../../backstage/lib/layui/layui.js" charset="utf-8"></script>
<script src="../../../backstage/js/x-layui.js" charset="utf-8"></script>

<script>
    var layer ;
    var form ;
    layui.use(['laydate', 'element', 'laypage', 'layer', 'form'], function() {
        $ = layui.jquery; //jquery
        laydate = layui.laydate; //日期插件
        element = layui.element(); //面包导航
        laypage = layui.laypage; //分页
        layer = layui.layer; //弹出层
         var form = layui.form(); //弹出层(下拉列表)

        laypage({
            cont: 'page',
            pages: 100,
            first: 1,
            last: 100,
            prev: '<em><</em>',
            next: '<em>></em>'
        });

        var start = {
            min: '1099-06-16 23:59:59',
            max: '2099-06-16 23:59:59',
            istoday: false,
            choose: function (datas) {
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas; //将结束日的初始值设定为开始日
            }
        };
        var end = {
            min: '1099-06-16 23:59:59',
            max: '2099-06-16 23:59:59',
            istoday: false,
            choose: function (datas) {
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };

            //获取搜索栏内的“类别”的数据
            $.ajax({
                type: 'GET',
                url: '/item/allItemType',
                dataType: "json",
                error: function () {
                    console.log("失败");
                },
                success: function (result) {
                    console.log(result);
                    var str = "";
                    var i = 0;
                    str+='<option value="">'+'请选择类别'+'</option>';
                        for (i = 0; i < result.allItemType.length; i++) {
                            str += '<option value="' + result.allItemType[i] + '">' + result.allItemType[i] + '</option>';
                        }
                        $('#type').html(str);
                        form.render('select');//每添加一次数据就更新一次渲染
                    }
            });


            //获取搜索栏内的“对象”的数据
            $.ajax({
                type: 'POST',
                url: '/item/allItemSubject',
                dataType: "json",
                error: function () {
                    console.log("失败");
                },
                success: function (result) {
                    console.log(result);
                    var str0 = "";
                    str0+='<option value="">'+'请选择生效对象'+'</option>';
                        for (var i = 0; i < result.allItemSubject.length; i++) {
                            str0 += '<option value="' + result.allItemSubject[i] + '">' + result.allItemSubject[i] + '</option>';
                        }
                        $('#subject').html(str0);
                        form.render("select");//每添加一次数据就更新一次渲染
                }
            });

        //显示商品详情
        $("#search").click(function () {

            var type = $.trim($('#type') .val());//所属商品类型
//            var itemName = $.trim($("#itemName").val());
            var subject= $.trim($('#subject') .val());

            $.ajax({
                type: 'POST',
                url: '/item/search',
                dataType: "json",
                data: {type:type,subject:subject},
                error: function () {
                    console.log("失败");
                },
                success: function (result) {
                    console.log(result);
                    if (result.items.length>0) {
                        var str = '';
                        for (var key in result) {
                            for (i = 0; i < result[key].length; i++) {
                                var product = result[key][i];
                                str += '<tr>';
                                str += '  <td>' + product.id + '</td>';
                                str += ' <td><img width="200" height="100" value="" src="${path}/backstage/images/'+product.picUrl+'" >'+'</td>';
//                                str += '  <td>' + product.picUrl + '</td>';
                                str += '  <td>' + product.itemName + '</td>';
                                str += '  <td>' + product.type + '</td>';
                                str += '  <td>' + new Date(product.createDate).toLocaleDateString().replace(/\//g, "-") + " " + new Date(product.createDate).toTimeString().substr(0, 8) + '</td>';
                                str += '  <td>' + product.subject + '</td>';
                                str += '  <td>' + product.howLong + '</td>';
                                str += '  <td>' + new Date(product.updateDate).toLocaleDateString().replace(/\//g, "-") + " " + new Date(product.updateDate).toTimeString().substr(0, 8) + '</td>';
                                str += '  <td>' + product.howUse + '</td>';
                                str += '  <td>' + product.description + '</td>';
                                str += '  <td>' + product.price + '</td>';
                                str += '  <td>' + product.credit + '</td>';
                                str += '  <td>' + product.state + '</td>';
                                str += '  <td>' + product.remark + '</td>';
                                str += '<td class="td-manage"> <a title="编辑" class="ml-5" style="text-decoration:none" href="javascript:void(0)" onclick="product_edit(this)" data-id='+product.id+' >'+' <i class="layui-icon">'+"&#xe642;"+'</i> </a> </td>';
                                str += '</tr>';
                            }
                        }
                        $('#x-img').html(str);
                    }else{
                        alert("没有该数据");
                    }
                }

            });
        });

    });
    //批量删除提交
    function delAll() {
        layer.confirm('确认要删除吗？', { icon: 3, title: '提示信息' }, function(index) {
            //捉到所有被选中的，发异步进行删除
            layer.msg('删除成功', { icon: 1 });
        });
    }
    // 添加
    function product_add(title, url, w, h) {
        x_admin_show(title, url, w, h);
    }
    // 编辑
    function product_edit(product) {
        //console.log($(product).data("id"));

        //将localStorage传递到哪个页面
        //location.href = 'product-edit.jsp';
       //设置localStorage
        window.localStorage.setItem('msg',$(product).data("id"));
        x_admin_show("编辑", "${path}/admin/itemEdit", 810,400);
    }
    // 删除
    function member_del(obj, id) {
        layer.confirm('确认要删除吗？', { icon: 3, title: '提示信息' }, function(index) {
            //发异步删除数据
            layer.msg('已删除!', { icon: 1, time: 1000 });
        });
    }
</script>
</body>

</html>